<template>
  <div class="player">
    <audio
      autoplay
      :src="`https://music.163.com/song/media/outer/url?id=${playMusic.id}.mp3`"
      @timeupdate="timeupdate"
      @play="playState = true"
      @pause="playState = false"
      @ended="$emit('changeMusic', 'next')"
      ref="player"
    ></audio>
    <div class="minibar">
      <img
        :src="playMusic.picUrl"
        :style="{ 'animation-play-state': playState ? 'running' : 'paused' }"
      />
      <h5 @click="showfull = true">
        <span
          :style="{ 'animation-play-state': playState ? 'running' : 'paused' }"
        >
          {{ playMusic.name }}-<b
            v-for="artist in playMusic.song.artists"
            :key="artist.id"
            >{{ artist.name }}</b
          >
        </span>
      </h5>
      <!-- <i class="fa fa-step-backward" aria-hidden="true"></i> -->
      <i
        :class="[
          'fa',
          { 'fa-play-circle': !playState },
          { 'fa-pause-circle': playState },
        ]"
        aria-hidden="true"
        @click="playState = !playState"
      ></i>
      <!-- <i class="fa fa-step-forward" aria-hidden="true"></i> -->
      <!-- <i class="fa fa-play-circle" aria-hidden="true"></i> -->
    </div>
    <div class="fullscreen">
      <!-- <transition  -->
      <!-- leave-active-class="animate__animated animate__bounceOutDown"> -->
      <full-screen
        v-if="showfull"
        @hidefull="showfull = $event"
        :playMusic="playMusic"
        :currentTime="currentTime"
        :duration="duration"
        @changeTime="changeTime"
        @playpause="playState = !playState"
        :playState="playState"
        :playList="playList"
        @changeMusic="$emit('changeMusic', $event)"
        :sound="sound"
        @change="change"
      ></full-screen>
      <!-- </transition> -->
    </div>
  </div>
</template>

<script>
import FullScreen from "@/components/FullScreen.vue";
export default {
  components: { FullScreen },
  props: {
    playMusic: {
      type: Object,
    },
    playList: Array,
  },
  data() {
    return {
      playState: true,
      showfull: false,
      currentTime: 0,
      duration: 0,
      sound: 0,
    };
  },
  watch: {
    playState(newValue) {
      if (newValue) {
        this.$refs.player.play();
      } else {
        this.$refs.player.pause();
      }
    },
  },
  methods: {
    changeTime(event) {
      this.$refs.player.currentTime = event;
    },
    change(event){
      this.$refs.player.volume=event/100;
    },
    timeupdate(e) {
      let ctime = e.target.currentTime;
      let totalTime = e.target.duration;
      this.currentTime = ctime;
      this.duration = totalTime;
      let songers= this.$refs.player.volume;
      this.sound = parseInt(songers*100);
      // console.log(songers);
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.player {
  position: sticky;
  bottom: 0px;
  z-index: 9;
  background: white;
  .minibar {
    padding: 5px;
    display: flex;
    align-items: center;
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      animation: roll 10s linear infinite;
    }
    h5 {
      flex: 1;
      margin: 0px 25px;
      overflow: hidden;
      span {
        line-height: 50px;
        display: inline-block;
        white-space: nowrap;
        animation: gun 10s linear infinite;
      }
    }
    i {
      width: 20px;
      height: 20px;
      color: #333333b5;
      font-size: 25px;
      position: relative;
      left: -16px;
    }
  }
}
@keyframes roll {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes gun {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}
</style>